<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>客户阶段管理</title>

  <link rel="stylesheet" href="/cusmanage/css/layui.css">
  <link rel="stylesheet" href="/cusmanage/css/formSelects-v4.css">
  <link rel="stylesheet" href="/cusmanage/css/common.css">
  <link rel="stylesheet" href="/cusmanage/css/setting.css">
</head>
<body>

  <div class="public-container">

    <section class="flex justify-center level-graph">
      <ul class="flex justify-center">
        {loop $level_manager as $manager}
        <li class="flex-1">
          <div class="level-graph-box">{$manager->name}</div>
          <div class="lg-line-h"></div>
        </li>
        {/loop}
        <!-- <li class="flex-1">
          <div class="level-graph-box">新阶段</div>
          <div class="lg-line-h"></div>
        </li> -->
      </ul>
    </section>

    <div class="level-table">
      <table class="layui-table lm-table" lay-skin="line">
        <colgroup>
          <col width="100">
          <col width="140">
          <col width="180">
          <col>
          <col width="140">
        </colgroup>
        <thead>
          <tr>
            <th></th>
            <th>客户阶段</th>
            <th>阶段描述</th>
            <th>跟进提醒</th>
            <th>操作</th>
          </tr> 
        </thead>
        <tbody>
          {loop $level_manager as $manager}
          <tr>
            <td>
              <a class="level-table-move {$manager->sequence == 1 ? 'disabled' : '' }" data-direction="up" data-id="{$manager->id}" href="javascript:;">&uarr;</a>
              <a class="level-table-move {$manager->sequence == count($level_manager) ? 'disabled' : ''}" data-direction="down" data-id="{$manager->id}" href="javascript:;">&darr;</a>
            </td>
            <td data-name="{$manager->name}">{$manager->name}</td>
            <td data-description="{$manager->description}">{$manager->description}</td>
            <td data-ridstatus="{$manager->qyuser_remind_status}"  data-remindtype="{$manager->qyuser_remind_type}" data-exptimed="{$manager->remind_exptime_d}" data-exptimeh="{$manager->remind_exptime_h}">
              {if $manager->qyuser_remind_status == 1 }
                {if $manager->qyuser_remind_type == 1}
                <p><i class="layui-icon layui-icon-ok" style="color: #00bb74;"></i>
                  员工提醒：超过<strong>【{$manager->remind_exptime_d}天】</strong>停留，次日<strong>【{$manager->remind_exptime_h}】</strong>提醒
                </p>
                {else}
                <p><i class="layui-icon layui-icon-ok" style="color: #00bb74;"></i>
                  员工提醒：超过<strong>【{$manager->remind_exptime_d}天】</strong>未联系，次日<strong>【{$manager->remind_exptime_h}】</strong>提醒
                </p>
                {/if}
              {else}
              <p><i class="layui-icon layui-icon-ok" style="ccolor: #ccc;"></i>
                员工提醒：-
              </p>
              {/if}
             <!--  <p><i class="layui-icon layui-icon-ok" style="color: #ccc;"></i>
                管理员提醒：-
              </p> -->
            </td>
            <td>
              <span class="layui-breadcrumb" lay-separator="|">
                <a class="level-table-delete" data-id="{$manager->id}" href="javascript:;" style="color: #1890ff;">删除</a>
                <a class="level-table-edit" data-id="{$manager->id}" href="javascript:;" style="color: #1890ff;">编辑</a>
              </span>
            </td>
          </tr>
          {/loop}
        </tbody>
      </table>
      <div class="ltable-add-line">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal level-table-edit" date-id="">
          <i class="layui-icon layui-icon-add-circle-fine"></i>添加
        </button>
      </div>
    </div>

  </div>

  <!-- 添加/编辑 -->
  <div id="levelEdit" class="level-edit-panel" style="display: none;">
    <div class="level-edit-tip"><i class="layui-icon layui-icon-notice"></i>
      提示：【未联系提醒功能】需员工开通会话存档接口后才能生效,最大设置8个阶段
    </div>
    <form class="layui-form" id="form1" action="">
      <input type="hidden" name="id" id="id" value="">
      <div class="leform-content" style="height:400px;overflow:auto;padding:20px 30px 0 0">
        <div class="layui-form-item">
          <label class="layui-form-label">阶段名称：</label>
          <div class="layui-input-block">
            <input type="text" name="name" id="name" required  lay-verify="required" placeholder="请输入阶段名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">阶段描述：</label>
          <div class="layui-input-block">
            <textarea name="description" id="description" placeholder="限制200字符以内" maxlength="100" class="layui-textarea" style="background: #fbfbfb;"></textarea>
          </div>
        </div>
        <!-- 员工 -->
        <div class="layui-form-item">
          <label class="layui-form-label">员工跟进提醒：</label>
          <div class="layui-input-block">
            <input type="checkbox" name="qyuser_remind_status" id="remindStatus" value="1" lay-skin="switch">
          </div>
          <div class="layui-input-block" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="layui-input-inline" style="width: 100px;">
              <select name="qyuser_remind_type" id="remindType" lay-verify="required" lay-filter="timeType" class="layui-bg-blue">
                <option value="1">停留时间</option>
                <option value="2">未联系</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: auto;line-height: 38px;">超过</div>
            <div class="layui-input-inline" style="width:50px">
              <input class="layui-input timeDay" type="number" min="1" value="7" name="remind_exptime_d" id="exptimed" required  lay-verify="required" autocomplete="off">
            </div>
            <div class="layui-input-inline" style="width: auto;line-height: 38px;">天后，次日</div>
            <div class="layui-input-inline" style="width:70px">
              <input type="text" class="layui-input" id="hintTime1" name="remind_exptime_h" value="09:00">
            </div>
            <div class="layui-input-inline" style="width: auto;line-height: 38px;">提醒</div>
          </div>
          <div class="layui-input-block" style="clear: left;">
            <p class="level-edit-remind">客户【<span class="time-type-text">停留时间</span>】时间超过了【<span class="hint-day-text">7</span>天】后，次日【<span class="hint-time-text">09:00</span>】提醒员工</p>
          </div>
        </div>
        <!-- 管理员 -->
        <!-- <div class="layui-form-item">
          <label class="layui-form-label">管理员提醒：</label>
          <div class="layui-input-block">
            <input type="checkbox" name="managerHint" lay-skin="switch">
          </div>
          <div class="layui-input-block">
            <label class="layui-form-label" style="width: 84px;padding-left:0;">管理员提醒：</label>
            <div class="layui-input-block" style="width: 272px;margin-left: 86px;">
              <select name="selectManagerHint" xm-select="selectManagerHint" xm-select-show-count="2" xm-select-search="" xm-select-search-type="dl" xm-select-skin="normal">
                <option value="">选择接收通知管理员</option>
                <option value="1" disabled="disabled">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
                <option value="5">天津</option>
              </select>
            </div>
          </div>
          <div class="layui-input-block" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="layui-input-inline" style="width: 100px;">
              <select name="timeTypeManager" lay-verify="required" lay-filter="timeType">
                <option value="0">停留时间</option>
                <option value="1">未联系</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: auto;line-height: 38px;">超过</div>
            <div class="layui-input-inline" style="width:50px">
              <input class="layui-input timeDay" type="number" min="1" value="14" name="day1" required  lay-verify="required" autocomplete="off">
            </div>
            <div class="layui-input-inline" style="width: auto;line-height: 38px;">天后，次日</div>
            <div class="layui-input-inline" style="width:70px">
              <input type="text" class="layui-input" id="hintTime2" value="09:00">
            </div>
            <div class="layui-input-inline" style="width: auto;line-height: 38px;">提醒</div>
          </div>
          <div class="layui-input-block" style="clear: left;">
            <p class="level-edit-remind">客户【<span class="time-type-text">停留时间</span>】时间超过了【<span class="hint-day-text">7</span>天】后，次日【<span class="hint-time-text">09:00</span>】提醒管理员</p>
          </div>
        </div> -->
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block" style="text-align: right;padding: 10px 30px 0;">
          <button onclick="layer.close(layer.index)" type="button" class="layui-btn layui-btn-primary">取消</button>
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="levelEditForm">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="/cdn/jquery.js"></script>
  <script src="/cusmanage/js/layui.all.js"></script>
  <!-- https://hnzzmsf.github.io/example/example_v4.html#select_value -->
  <script src="/cusmanage/js/formSelects-v4.min.js"></script>
  <script src="/cusmanage/js/common.js"></script>
<!--   <script src="/layui/layui.js"></script> -->
  <script src="/js/ajax.js"></script>
  <script>
    // table 上下移动
    $('.level-table-move').on('click', function() {
      if ($(this).hasClass('disabled')) return;
      let direction = $(this).data('direction');
      let id = $(this).data('id');
      console.log(id);
      myAjaxPost(false, true, 'move_sequence.html', { id:id, direction:direction}, function (resp) {
        console.log(resp);
        if (resp.status == 'success') {
          tusi(resp.msg);
          setTimeout(function(){
            location.reload();
          },500);
        }else{
          // alert(resp.msg);
          tusi("移动失败");
        }
      });
    })
    // 删除
    $('.level-table-delete').on('click', function() {
        let id = $(this).data('id');
        deleteMission(id);
    })

    function deleteMission(id){
      layer.confirm('确定要删除该任务吗？', { icon: 7, title:'提示'}, function(index) {
        // confirm do something
        myAjaxPost(false, true, 'del_manager.html', { id:id}, function (resp) {
          if (resp.status == 'success') {
            tusi(resp.msg);
            setTimeout(function(){
              location.reload();
            },500);
          }else{
            // alert(resp.msg);
            tusi("此阶段有"+resp.data+"个客户存在,请将客户移到其它阶段后再执行此操作");
          }
        });
        layer.close(index);
      });
    }
    
    layui.use('form', function(){
      var form = layui.form;

      form.on('select(timeType)', function(data){
        // console.log(data.elem); //得到select原始DOM对象
        // console.log(data.value); //得到被选中的值
        // console.log(data.othis); //得到美化后的DOM对象
        $(this).parentsUntil('.leform-content').find('.time-type-text').text(
          data.value == 1 ? '停留时间' : '未联系'
        )
      })
      form.on('input(timeDay)', function(data){
        // console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        // console.log(data.othis); //得到美化后的DOM对象
        $(this).parentsUntil('.leform-content').find('.time-type-text').text(
          data.value == 1 ? '停留时间' : '未联系'
        )
      })

      $('.timeDay').on('input', function() {
        $(this).parentsUntil('.leform-content').find('.hint-day-text').text($(this).val() || 7)
      })

      layui.use('laydate', function(){
        var laydate = layui.laydate;

        //时间选择器
        laydate.render({ elem: '#hintTime1' ,type: 'time', format: 'HH:mm',
          done: function(value, date){
            $('#hintTime1').parentsUntil('.leform-content').find('.hint-time-text').text(value)
          }
        })
        laydate.render({ elem: '#hintTime2' ,type: 'time', format: 'HH:mm',
          done: function(value, date){
            $('#hintTime2').parentsUntil('.leform-content').find('.hint-time-text').text(value)
          }
        })
      })
        
      // 编辑
      $('.level-table-edit').on('click', function() {
        let _this = $(this);
        let id = _this.data('id');
        $('#id').val(id);
        if(id){
          tr = _this.parent().parent().parent();
          td_name = tr.children('td').eq(1).text();
          td_description = tr.children('td').eq(2).text();
          td_ridstatus = tr.children('td').eq(3).data('ridstatus');
          td_remindtype = tr.children('td').eq(3).data('remindtype');
          td_exptimed = tr.children('td').eq(3).data('exptimed');
          td_exptimeh = tr.children('td').eq(3).data('exptimeh');
          $('#name').val(td_name);
          $('#description').val(td_description);
          if(td_ridstatus == 1 && !($('#remindStatus').next('div').hasClass('layui-form-onswitch'))) $('#remindStatus').next('div').click();
          td_remindtype == 1 ? $('#remindType').val(1) : $('#remindType').val(2);
          $('#exptimed').val(td_exptimed);
          $('#hintTime1').val(td_exptimeh);
          $(".leform-content").find('.time-type-text').text(td_remindtype == 1 ? '停留时间' : '未联系');
          $(".leform-content").find('.hint-day-text').text(td_exptimed);
          $(".leform-content").find('.hint-time-text').text(td_exptimeh);
        }else{
          $(".leform-content").find('.hint-day-text').text(7);
          $(".leform-content").find('.hint-time-text').text('09:00');
          $('#form1')[0].reset();
        }
        form.render();
        layer.open({
          title: ['添加/编辑', 'font-weight:bold;'],
          type: 1,
          area: '630px',
          shadeClose: true,
          content: $('#levelEdit')
        })
      })

      //监听提交
      form.on('submit(levelEditForm)', function(data){
        // layer.msg(JSON.stringify(data.field));
        // return false;
        var formData = $('#form1').serialize();
        myAjaxPost(false, true, 'setting_save.html', formData, function (resp) {
          console.log(resp)
          if(resp.status == 'success') {
            layer.msg(resp.msg);
            setTimeout(function(){
              location.reload();
            },1000);
          }else{
            alert(resp.msg);
          }
        })
      });
    });

  </script>

</body>
</html>